<template>
  <div class="dashboard-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 顶部原有布局：左右两列 -->
      <div class="top-main-section">
        <!-- 左侧列 - 主内容区 -->
        <div class="left-column">
          <!-- 顶部区域：欢迎信息、指标卡片和赛事分布 -->
          <div class="top-section-card">
            <!-- 顶部欢迎信息 -->
            <div class="welcome-header">
              <div class="welcome-text">
                <span class="flame-icon">🔥</span>
                <span>欢迎回来, 智体评估</span>
              </div>
            </div>

            <!-- 分隔线 -->
            <div class="divider-line"></div>

            <!-- 关键指标卡片 -->
            <div class="metrics-section">
              <div class="metric-card">
                <div class="metric-icon blue">
                  <i class="el-icon-document"></i>
                </div>
                <div class="metric-content">
                  <div class="metric-value">373.5w+</div>
                  <div class="metric-label">机构注册数</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon purple">
                  <i class="el-icon-document"></i>
                </div>
                <div class="metric-content">
                  <div class="metric-value">368</div>
                  <div class="metric-label">承办单位注册数</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon orange">
                  <i class="el-icon-chat-line-round"></i>
                </div>
                <div class="metric-content">
                  <div class="metric-value">8874</div>
                  <div class="metric-label">报告提交数</div>
                </div>
              </div>
              <div class="metric-card">
                <div class="metric-icon blue-chart">
                  <i class="el-icon-data-line"></i>
                </div>
                <div class="metric-content">
                  <div class="metric-value">892</div>
                  <div class="metric-label">已完成审核</div>
                </div>
              </div>
            </div>

            <!-- 分隔线 -->
            <div class="divider-line"></div>

            <!-- 赛事分布 -->
            <div class="event-distribution">
              <div class="card-header">
                <div class="card-title">赛事分布</div>
                <el-select v-model="eventYear" placeholder="请选择" size="small" style="width: 200px;">
                  <el-option label="2025年赛事评估项目" value="2025"></el-option>
                </el-select>
              </div>
              <!-- 地图区域 - 留空用于开发 -->
              <div class="map-container">
                <!-- 地图区域预留，后续开发 -->
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧列 - 侧边栏 -->
        <div class="right-column">
          <div class="card">
            <!-- 快捷菜单导航 -->
            <div>
              <div class="card-title">快捷菜单导航</div>
              <div class="quick-menu-grid">
                <div class="quick-menu-item" v-for="(item, index) in quickMenus" :key="index">
                  <div class="menu-icon">
                    <i :class="item.icon"></i>
                  </div>
                  <div class="menu-label">{{ item.label }}</div>
                </div>
              </div>
            </div>

            <!-- 分隔线 -->
            <div class="divider-line"></div>

            <!-- 前台宣传设置 -->
            <div>
              <div class="card-title">前台宣传设置</div>
              <div class="promotion-settings">
                <div class="promotion-item">
                  <div class="promotion-icon">
                    <i class="el-icon-document"></i>
                  </div>
                  <div class="promotion-label">优秀项目</div>
                </div>
                <div class="promotion-item">
                  <div class="promotion-icon">
                    <i class="el-icon-document"></i>
                  </div>
                  <div class="promotion-label">公告发布</div>
                </div>
                <div class="promotion-item">
                  <div class="promotion-icon">
                    <i class="el-icon-picture"></i>
                  </div>
                  <div class="promotion-label">更多设置</div>
                </div>
              </div>
            </div>
          </div>

          <!-- 轮播图 -->
          <div class="card">
            <el-carousel :interval="4000" height="200px">
              <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
                <div class="carousel-item">
                  <div class="carousel-placeholder">
                    <i class="el-icon-picture"></i>
                    <span>轮播图 {{ index + 1 }}</span>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <!-- 底部布局 -->
      <div class="bottom-section">
        <!-- 左侧区域：与顶部左侧列宽度一致 -->
        <div class="bottom-left-section">
          <!-- 评分前10 -->
          <div class="card">
            <div class="card-header">
              <div class="card-title-with-select">
                <span>评分前10</span>
                <el-select v-model="top10Year" placeholder="请选择" size="small" style="width: 200px;">
                  <el-option label="2025年赛事评估项目" value="2025"></el-option>
                </el-select>
              </div>
              <a href="javascript:;" class="view-more">查看更多</a>
            </div>
            <div class="tabs">
              <div class="tab-item" :class="{ active: activeTab === 'national' }" @click="activeTab = 'national'">
                全国
              </div>
              <div class="tab-item" :class="{ active: activeTab === 'provincial' }" @click="activeTab = 'provincial'">
                省级
              </div>
              <div class="tab-item" :class="{ active: activeTab === 'grassroots' }" @click="activeTab = 'grassroots'">
                基层
              </div>
            </div>
            <div class="table-wrapper">
              <el-table :data="top10Data" style="width: 100%" size="small">
                <el-table-column prop="rank" label="排名" width="80" align="center"></el-table-column>
                <el-table-column prop="eventName" label="赛事名称"></el-table-column>
                <el-table-column prop="baseScore" label="基础分" width="100" align="center"></el-table-column>
                <el-table-column prop="totalScore" label="总分" width="100" align="center"></el-table-column>
              </el-table>
            </div>
          </div>

          <!-- 赛事类别占比 -->
          <div class="card">
            <div class="card-title">赛事类别占比</div>
            <div class="chart-container">
              <div id="categoryChart" style="width: 100%; height: 100%; min-height: 300px;"></div>
            </div>
            <div class="chart-legend">
              <div class="legend-item" v-for="(item, index) in categoryData" :key="index">
                <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
                <span class="legend-label">{{ item.name }}</span>
                <span class="legend-value">{{ item.value }}%</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧：公告和帮助文档 -->
        <div class="right-bottom-column">
          <!-- 公告 -->
          <div class="card">
            <div class="card-header">
              <div class="card-title">公告</div>
              <a href="javascript:;" class="view-more">查看更多</a>
            </div>
            <div class="announcement-list">
              <div class="announcement-item" v-for="(item, index) in announcements" :key="index">
                <span class="announcement-tag" :class="item.type">{{ item.tag }}</span>
                <span class="announcement-content">{{ item.content }}</span>
              </div>
            </div>
          </div>

          <!-- 帮助文档 -->
          <div class="card">
            <div class="card-header">
              <div class="card-title">帮助文档</div>
              <a href="javascript:;" class="view-more">查看更多</a>
            </div>
            <div class="help-docs-grid">
              <a href="javascript:;" class="help-doc-item" v-for="(item, index) in helpDocs" :key="index">
                {{ item }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      eventYear: '2025',
      top10Year: '2025',
      activeTab: 'national',
      top10Data: [
        { rank: 1, eventName: '全国村BA赛事', baseScore: 80, totalScore: 100 },
        { rank: 2, eventName: '全国村BA赛事', baseScore: 80, totalScore: 98 },
        { rank: 3, eventName: '全国村BA赛事', baseScore: 80, totalScore: 97 },
        { rank: 4, eventName: '全国村BA赛事', baseScore: 80, totalScore: 96 },
        { rank: 5, eventName: '全国村BA赛事', baseScore: 80, totalScore: 95 }
      ],
      quickMenus: [
        { icon: 'el-icon-document', label: '入驻审核' },
        { icon: 'el-icon-data-line', label: '项目管理' },
        { icon: 'el-icon-box', label: '题库编辑' },
        { icon: 'el-icon-user', label: '平台账号' },
        { icon: 'el-icon-setting', label: '系统设置' },
        { icon: 'el-icon-more', label: '更多' }
      ],
      categoryData: [
        { name: '全国性群众体育赛事', value: 16, color: '#5B9BD5' },
        { name: '省级群众体育赛事', value: 48, color: '#4472C4' },
        { name: '基层群众体育赛事', value: 36, color: '#2E5597' }
      ],
      categoryChart: null,
      carouselItems: [
        { id: 1, title: '轮播图1' },
        { id: 2, title: '轮播图2' },
        { id: 3, title: '轮播图3' }
      ],
      announcements: [
        { tag: '活动', type: 'activity', content: '内容最新优惠活动' },
        { tag: '消息', type: 'message', content: '新增内容尚未通过审核,详...' },
        { tag: '通知', type: 'notice', content: '新增内容尚未通过审核,详...' },
        { tag: '通知', type: 'notice', content: '新增内容尚未通过审核,详...' },
        { tag: '消息', type: 'message', content: '新增内容尚未通过审核,详...' }
      ],
      helpDocs: ['审核说明', '使用指南', '评分说明', '入驻流程']
    }
  },
  mounted() {
    this.initCategoryChart();
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.categoryChart) {
      this.categoryChart.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    // 初始化赛事类别占比图表
    initCategoryChart() {
      this.$nextTick(() => {
        const chartDom = document.getElementById('categoryChart');
        if (!chartDom) return;

        this.categoryChart = echarts.init(chartDom);

        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}% ({d}%)'
          },
          series: [
            {
              name: '赛事类别占比',
              type: 'pie',
              radius: ['40%', '70%'], // 环形图
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 0,
                borderColor: '#fff',
                borderWidth: 2
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: false
                }
              },
              labelLine: {
                show: false
              },
              data: this.categoryData.map(item => ({
                value: item.value,
                name: item.name,
                itemStyle: {
                  color: item.color
                }
              }))
            }
          ]
        };

        this.categoryChart.setOption(option);
      });
    },
    // 处理窗口大小变化
    handleResize() {
      if (this.categoryChart) {
        this.categoryChart.resize();
      }
    }
  }
}
</script>

<style scoped lang="scss">
.dashboard-container {
  padding: 0;
  background: #F4F7FA;
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
}

.top-section-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.welcome-header {
  margin-bottom: 0;
  // padding-bottom: 16px;

  .welcome-text {
    font-size: 16px;
    font-weight: 500;
    color: #1D2129;
    display: flex;
    align-items: center;
    gap: 8px;

    .flame-icon {
      font-size: 18px;
    }
  }
}

.metrics-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 0;

  .metric-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: none;

    .metric-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #fff;

      &.blue {
        background: #2E73EA;
      }

      &.purple {
        background: #8B5CF6;
      }

      &.orange {
        background: #F59E0B;
      }

      &.blue-chart {
        background: #3B82F6;
      }
    }

    .metric-content {
      flex: 1;

      .metric-value {
        font-size: 20px;
        font-weight: bold;
        color: #1D2129;
        margin-bottom: 2px;
      }

      .metric-label {
        font-size: 13px;
        color: #4E5969;
      }
    }
  }
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  min-height: 0;
}

.top-main-section {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.left-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.right-column {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;

  >.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    // min-height: 0;
  }

  >.card:last-child {
    flex: 1.2;
  }
}

.bottom-section {
  display: flex;
  gap: 20px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

.bottom-left-section {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 20px;
  min-width: 0;
  align-items: stretch;

  >.card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

.table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.divider-line {
  width: 100%;
  height: 1px;
  background: #E5E6EB;
  margin: 26px 0;
}

.event-distribution {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-shrink: 0;
  }

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #1D2129;
    margin-bottom: 0;
  }
}

.card-title-with-select {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #1D2129;
}

.right-bottom-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 380px;
  flex-shrink: 0;
  align-items: stretch;

  >.card:first-child {
    padding: 16px;
    flex: 1.5;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  >.card:last-child {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

.card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .card-title {
    font-size: 16px;
    font-weight: bold;
    color: #1D2129;
    margin-bottom: 20px;
  }

  .card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .view-more {
    color: #325AED;
    font-size: 14px;
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }
}

.map-container {
  width: 100%;
  flex: 1;
  min-height: 150px;
  background: #F5F7FA;
  border-radius: 8px;
  border: 1px dashed #D9DCE0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #86909C;
  font-size: 14px;
}

.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;

  .tab-item {
    padding: 6px 16px;
    border-radius: 4px;
    font-size: 14px;
    color: #4E5969;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #F2F3F5;
    }

    &.active {
      background: #325AED;
      color: #fff;
    }
  }
}

.quick-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 20px;

  .quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    // padding: 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #F5F7FA;
    }

    .menu-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #F5F7FA;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #325AED;
    }

    .menu-label {
      font-size: 14px;
      color: #4E5969;
    }
  }
}

.promotion-settings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;

  .promotion-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    // padding: 20px;
    cursor: pointer;
    transition: all 0.3s;

    &:hover {
      background: #F5F7FA;
    }

    .promotion-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #F5F7FA;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #325AED;
    }

    .promotion-label {
      font-size: 14px;
      color: #4E5969;
    }
  }
}

.chart-container {
  margin-bottom: 16px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;

  >div {
    width: 100%;
    height: 100%;
  }
}

.chart-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;

  .legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;

    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .legend-label {
      flex: 1;
      color: #4E5969;
    }

    .legend-value {
      color: #1D2129;
      font-weight: 500;
    }
  }
}

.carousel-item {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  .carousel-placeholder {
    width: 100%;
    height: 100%;
    background: #F5F7FA;
    border-radius: 8px;
    border: 1px dashed #D9DCE0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #86909C;
    font-size: 14px;

    i {
      font-size: 32px;
      color: #86909C;
    }
  }
}

.announcement-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;

  .announcement-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;

    .announcement-tag {
      padding: 2px 6px;
      border-radius: 4px;
      font-size: 12px;
      flex-shrink: 0;

      &.activity {
        background: #FFF4E6;
        color: #F59E0B;
      }

      &.message {
        background: #E6F8F0;
        color: #28B84A;
      }

      &.notice {
        background: #E6F4FF;
        color: #2E73EA;
      }
    }

    .announcement-content {
      flex: 1;
      font-size: 13px;
      color: #4E5969;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.help-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;

  .help-doc-item {
    padding: 10px;
    background: #F5F7FA;
    border-radius: 8px;
    text-align: center;
    font-size: 13px;
    color: #4E5969;
    text-decoration: none;
    transition: all 0.3s;

    &:hover {
      background: #E5E6EB;
      color: #325AED;
    }
  }
}

// Element UI 表格样式调整
::v-deep .el-table {
  font-size: 14px;

  .el-table__header {
    th {
      background: #F5F7FA;
      color: #1D2129;
      font-weight: 500;
    }
  }

  .el-table__body {
    td {
      color: #4E5969;
    }
  }
}

// Element UI 轮播图样式调整
::v-deep .el-carousel__item {
  border-radius: 8px;
  overflow: hidden;
}

::v-deep .el-carousel__indicators {
  bottom: 10px;

  .el-carousel__indicator {
    button {
      width: 20px;
      height: 4px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.5);
    }

    &.is-active button {
      background-color: #fff;
    }
  }
}
</style>
